<template>
	<!-- 主容器 -->
	<view class="minimal-container">
		<u-navbar title="多普勒测流" :autoBack="true" :placeholder="true" bgColor="#f8f9fa">
		</u-navbar>
		<!-- 2. 操作按钮行 -->
		<view class="action-buttons">
			<!-- 初始化按钮 -->
			<button class="action-btn init-btn" @click="dialogToggle">
				<image class="btn-icon" src="/static/reset-icon.png"></image>
				清空数据
			</button>
			<!-- 连接/断开按钮 -->
			<button class="action-btn connectbtn" :class="{connbutt: isConnected}" @click="toggleConnect" :disabled="isConnecting">
				<image class="btn-icon" :src="isConnected ? '/static/connect-icon.png' : '/static/disconnect-icon.png'">
				</image>
				{{ isConnected ? '断开连接' : '连接设备' }}
			</button>
		</view>

		<!-- 3. 设备状态显示区域 -->
		<view class="status-display" :class="{connected: isConnected}">
			<view class="status-content">
				<!-- 状态图标 -->
				<image class="status-icon"
					:src="isConnected ? '/static/disconncted-icon.png' : '/static/disconnected-icon.png'"></image>
				<!-- 状态文本 -->
				<text class="status-text">{{ connectionStatus }}</text>
			</view>
			<!-- 状态详情 -->
			<view class="status-detail">
				<text class="detail-text">{{ statusDetail }}</text>
			</view>
		</view>

		<!-- 4. 水深设置行 -->
		<view class="single-row" @click="showDepthDialog">
			<view class="row-label">
				<!-- 水深图标 -->
				<image class="row-icon" src="/static/depth-icon.png"></image>
				<text>当前水深</text>
			</view>
			<view class="row-value-container">
				<!-- 水深值显示 -->
				<text class="row-value">{{ currentDepth || '点击设置' }}</text>
				<!-- 编辑图标 -->
				<image class="edit-icon" src="/static/edit-icon.png"></image>
			</view>
		</view>

		<!-- 5. 流量系数设置行 -->
		<view class="single-row" @click="showCoefficientDialog">
			<view class="row-label">
				<!-- 流量系数图标 -->
				<image class="row-icon" src="/static/coefficient-icon.png"></image>
				<text>流量系数</text>
			</view>
			<view class="row-value-container">
				<!-- 流量系数值显示 -->
				<text class="row-value">{{ flowCoefficient || '点击设置' }}</text>
				<!-- 编辑图标 -->
				<image class="edit-icon" src="/static/edit-icon.png"></image>
			</view>
		</view>

		<!-- 6. 测线选择卡片 -->
		<view class="lines-card">
			<view class="card-header">
				<!-- 测线图标 -->
				<image class="card-icon" src="/static/lines-icon.png"></image>
				<!-- 测线标题 -->
				<text class="card-title">当前测站 {{ measureLines.length }} 条测线</text>
			</view>
			<!-- 测线按钮网格 -->
			<view class="lines-grid">
				<!-- 循环生成测线按钮 -->
				<button v-for="line in measureLines" :key="line.id" :class="line.aveTy == 0 ? 'line-btn' : 'other-btn'">
					测线{{ line.id }}
				</button>
			</view>
		</view>

		<!-- 7. 重新生成测线按钮 -->
		<button class="refresh-btn" @click="generateNewLines">
			<image class="refresh-icon" src="/static/refresh-icon.png"></image>
			开始测量
		</button>
		<!-- <button type="primary" style="margin: 10rpx;width: 100%;" @click="speaks()">播放语音</button> -->
		<!-- 测量弹窗 -->
		<!-- 测量弹窗 -->
		<u-popup :show="flowCheckpop" mode="top">
			<view class="viewHistory">
				<!-- 圆 -->
				<view class="head_d">
					<view class="yuan_a">
						<view class="nub yang_texrt">
							{{effectiveFlow}}
						</view>
						<view class="linbox" style="background-color: #8a5a00;">

						</view>
						<view class="">
							有效流速
						</view>
					</view>
					<view class="" style="margin-bottom: -30rpx;">
						<view :class="isActive?'yuan_b':'yuan_c'">

						</view>
					</view>

					<view class="yuan_a">
						<view class="nub yang_texrt">
							{{signaVelocity}}
						</view>
						<view class="linbox" style="background-color: #8a5a00;">

						</view>
						<view class="">
							瞬时流速
						</view>
					</view>
				</view>
				<!-- 时间线条 -->
				<view class="line_cla_box">
					<view class="line_cla">
						<view class="line_a" :style="{height: i*30 + 'rpx'}" v-for="(i,index) in inlineArr"
							:key="index">
						</view>
					</view>
					<!-- 均匀度 -->
					<view class="junyunddd">
						均匀度:{{junyundu}}
					</view>
					<!-- 进度条 -->
					<view class="progress_bar">
						<u-line-progress :percentage="percentageNub" height="5" :showText="false"
							:activeColor="actiColor" :inactiveColor="inacteColor" />
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<u-button class="custom-style" @click="remeasureFn" text="重新测量"  shape="circle"
							type="primary"></u-button>
						<view class="" style="width: 40rpx;">

						</view>
						<u-button class="custom-style" @click="confirmflowCheckpopFn" text="返回" 
							shape="circle" type="warning"></u-button>
					</view>
				</view>
				<view class="" v-if="saveIF">
					<u-button class="custom-style" @click="holdPointVelocityFn" text="保存点流速" 
						shape="circle" type="success"></u-button>
				</view>

				<view class="" v-if="isAllLiusuValid">
					<u-button class="custom-style" @click="calculatedFlowFn" text="计算流量" shape="circle"
						type="error"></u-button>
				</view>
				<!-- 测线 -->
				<view class="measuring_box">
					<view class="container">
						<view class="list-header">
							<text class="header-text">测线编号</text>
							<text class="header-text">流速(m/s)</text>
						</view>

						<view class="list-container">
							<view class="list-item" v-for="(item, index) in listData" :key="index">
								<text :class="item.aveTy==0 ? 'item-acv' : 'item-text' ">{{ item.id }}</text>
								<text :class="item.aveTy==0 ? 'item-acv' : 'item-text' ">{{ item.aveTy }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 计算流量弹窗 -->
		<u-popup :show="flowRateIF" mode="top">
			<view class="viewHistory_flow_rate">
				<!-- 弹窗插槽 -->
				<shouchiganleflow ref="myCDF" @fatherMethod="fatherMethod">
				</shouchiganleflow>
			</view>
		</u-popup>

		<!-- 8. 水深设置弹窗 -->
		<uni-popup ref="depthDialog" type="dialog">
			<view class="dialog-container">
				<view class="dialog-header">
					<text class="dialog-title">设置水深</text>
				</view>
				<view class="dialog-content">
					<!-- 水深输入框 -->
					<input class="dialog-input" placeholder-style="color: #b4b4b4;" type="number" v-model="depthInput"
						placeholder="请输入水深(米)" focus />
				</view>
				<view class="dialog-actions">
					<!-- 取消按钮 -->
					<button class="dialog-btn cancel-btn" @click="closeDepthDialog">取消</button>
					<!-- 确定按钮 -->
					<button class="dialog-btn confirm-btn" @click="confirmDepth">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 9. 流量系数设置弹窗 -->
		<uni-popup ref="coefficientDialog" type="dialog">
			<view class="dialog-container">
				<view class="dialog-header">
					<text class="dialog-title">设置流量系数</text>
				</view>
				<view class="dialog-content">
					<!-- 流量系数输入框 -->
					<input class="dialog-input" placeholder-style="color: #b4b4b4;" type="number"
						v-model="coefficientInput" placeholder="请输入流量系数" focus />
				</view>
				<view class="dialog-actions">
					<!-- 取消按钮 -->
					<button class="dialog-btn cancel-btn" @click="closeCoefficientDialog">取消</button>
					<!-- 确定按钮 -->
					<button class="dialog-btn confirm-btn" @click="confirmCoefficient">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 初始化 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="警告" content="是否清空已测量数据，此操作不可逆！"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		showToast,
		showToastButton,
		androidDialog,
		showColorToast,
		screenShotEnableState,
		AndroidTTSVoice
	} from "@/uni_modules/android-utils"
	var tts;
	import shouchiganleflow from "@/components/shouchiganleFlow.vue"
	export default {
		components: {
			shouchiganleflow
		},
		data() {
			return {
				listData: [], //测量测线
				cexianini: [], //初始状态
				isConnected: false, // 设备连接状态
				isConnecting: false, // 正在连接中状态
				currentDepth: '', // 当前水深值
				depthInput: '', // 水深输入框临时值
				flowCoefficient: '', // 当前流量系数
				coefficientInput: '', // 流量系数输入框临时值
				measureLines: [], // 测线数组
				connectionStatus: '设备未连接', // 连接状态文本
				statusDetail: '请点击上方连接按钮', // 状态详情文本
				objFlowData: {
					wD: '',
					dotMethod: '',
					velocityOfFlow: [],
					flowRateList: []
				},
				actiColor: '#55aa7f', //进度条
				inacteColor: '#3e3e3e', //进度条
				percentageNub: 100, //进度条
				isActive: false, //信号灯闪烁
				flowCheckpop: false, //测量弹窗
				urlAlphabet: 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict',
				flowRateIF: false, //计算流量
				mfvIF: true, //处理信号
				effectiveFlow: 0, //有效流速
				junyundu: 0, //均匀度
				processingSignal: [], //处理计算流速
				inlineArr: [], //均匀度线条
				signaVelocity: 0, //瞬时流速
				changjia: '品牌', //品牌
				duopsett: null, //多普勒定时器
				duopsein: null, //多普勒定时器
				saveIF: false, // 保存点流速
				cexianCounter: 0, //已测完数量

			}
		},
		computed: {
			// 检查所有 liusu 是否有效（不为 0 或空字符串）
			isAllLiusuValid() {
				return this.listData.every(item => item.aveTy !== 0 && item.aveTy !== '');
			}
		},
		onUnload() {
			console.log('卸载');
			this.inquitimeFn() //删除多普勒定时器 
		},
		onLoad(option) {
			let id = option.doppler
			if (id == 1) {
				this.changjia = '德希'
			}
			if (id == 2) {
				this.changjia = '大禹'
			}
			if (id == 3) {
				this.changjia = '睿鑫'
			}
			// 语音初始化
			this.initialVoice()
		},
		onShow() {
			// 断开设备
			uni.onBLEConnectionStateChange((res) => {
				// 该方法回调中可以用于处理连接意外断开等异常情况
				if (res.connected !== true) {
					console.log('意外断开');
					this.lanname = ''
					uni.$u.vuex('vuex_devicename', '')
					uni.$u.vuex('vuex_deviceId', '')
					this.lampRFn()
					this.disconnectDevice()
				}
			})
			setTimeout(()=>{
				uni.showToast({
					title: '设备正在连接',
					mask: true,
					duration: 1000
				});
			},2000)
			// 蓝牙服务
			this.lanname = this.vuex_devicename
			this.deviceId = this.vuex_deviceId
			this.getBLEDeviceServices()
			// 测线数据
			let array = this.vuex_cezhanInfo.measurementModeList[1].value || [];
			this.measureLines = array //测线
			// 初始化或者赋值测量列表
			setTimeout(() => {
				if (this.vuex_stationData.length == 0) {
					this.initializeTheFlow()
				} else {
					this.listData = this.vuex_stationData
				}
				this.calculateTheFlowRate(this.listData)
			}, 0)
			// 设置水深系数
			let obj = this.vuex_flowicient
			this.currentDepth = obj.wd
			this.flowCoefficient = obj.coeffient
		},
		methods: {
			/**
			 * 开始测量
			 */
			generateNewLines() {
				// 开始测量
				this.inquitimeFn() //删除多普勒定时器 
				// 进度条
				this.percentageNub = 100
				this.actiColor = '#55aa7f'
				setTimeout(() => {
					this.inquiryFn()
				}, 3000)
				console.log('测量--+++++++++++++++++++++++');
				// 信号均匀度线条
				this.inlineArr = []
				//瞬时流速
				this.signaVelocity = 0
				// 弹窗
				this.flowCheckpop = true
				// 处理数据
				this.mfvIF = true
				this.processingSignal = [] //处理流速
				this.saveIF = false //隐藏保存点流速
			},
			// 监听信息处理流速
			monitoringInformationProcessing(res) {
				// let resHex = this.ab2hex(res.value)
				let resHex = res
				console.log('监听数据', resHex, resHex.length);
				// 睿鑫
				if (this.changjia == '泰克') {
					console.log('ABCD', resHex.substr(6, 8));
					let hexabc = resHex.substr(6, 8)
					let aa = hexabc.substr(0, 2)
					let bb = hexabc.substr(2, 2)
					let cc = hexabc.substr(4, 2)
					let dd = hexabc.substr(6, 2)

					let nubm = aa + bb + cc + dd

					this.mfvFn(this.hexToFloat(nubm).toFixed(3))

				}
				if (this.changjia == '大禹') {
					console.log('ABCD', resHex.substr(6, 8));
					let hexabc = resHex.substr(6, 8)
					let aa = hexabc.substr(0, 2)
					let bb = hexabc.substr(2, 2)
					let cc = hexabc.substr(4, 2)
					let dd = hexabc.substr(6, 2)

					let nubm = aa + bb + cc + dd

					this.mfvFn(this.hexToFloat(nubm).toFixed(3))
				}
				if (this.changjia == '睿鑫') {
					console.log('ABCD', resHex.substr(6, 8));
					let hexabc = resHex.substr(6, 8)
					let aa = hexabc.substr(0, 2)
					let bb = hexabc.substr(2, 2)
					let cc = hexabc.substr(4, 2)
					let dd = hexabc.substr(6, 2)

					let nubm = cc + dd + aa + bb

					this.mfvFn(this.hexToFloat(nubm).toFixed(3))

				}
				if (this.changjia == '德希') {
					let str = resHex.substr(14, 4)
					console.log('str', str);
					this.mfvFn(this.hexToDecimal(str) / 1000)
				}
			},
			// 获取测流数据
			mfvFn(data) {
				let num = (data * 1).toFixed(3)
				if (this.inlineArr.length < 50 && this.mfvIF) {
					this.progressBarFn() //进度条
					this.inlineArr.push(num * 1)
					this.processingSignal.push(num)
					this.signaVelocity = num //实时数据
				} else if (this.mfvIF) {
					this.mfvIF = false
					let arr = this.processingSignal
					this.removeSmallestN(arr, 10) //删除最小的
					this.removeMax(arr, 10) //删除最大的
					this.effectiveFlow = (this.averageSum(arr) * 1).toFixed(3)
					this.junyundu = this.evennessFn(this.inlineArr)
					this.pointVelotyFn() //显示保存
				}
			},
			//询问多普勒
			inquiryFn() {
				// let arr = ['0x04', '0x04', '0x00', '0x00', '0x00', '0x04', '0xF1', '0x9C']
				let arr = []
				if (this.changjia == '泰克') {
					arr = ['0x65', '0x03', '0x00', '0x02', '0x00', '0x04', '0xED', '0xED']
				}
				if (this.changjia == '大禹') {
					arr = ['0x66', '0x03', '0x00', '0x0C', '0x00', '0x02', '0x0C', '0x1F']

					// arr = ['0x66', '0x03', '0x00', '0x0A', '0x00', '0x02', '0xEC', '0x1E']
				}
				if (this.changjia == '睿鑫') {
					arr = ['0x64', '0x03', '0x00', '0x00', '0x00', '0x02', '0xCD', '0xFE']
					// arr = ['0x64', '0x03', '0x00', '0x26', '0x00', '0x02', '0x2C', '0x35']
				}
				if (this.changjia == '德希') {
					arr = ['0x01', '0x04', '0x00', '0x00', '0x00', '0x04', '0xF1', '0xC9']
					// arr = ['0x64', '0x03', '0x00', '0x26', '0x00', '0x02', '0x2C', '0x35']
				}
				this.inquitimeFn() //删除多普勒定时器
				this.duopsein = setInterval(() => {
					this.conbuffer(arr)
					this.continuityFn() //信号灯
					// this.mfvFn(this.getRandomNumber(1.025, 2.399))
				}, 1000);
				this.duopsett = setTimeout(() => {
					this.inquitimeFn()
				}, 53000)
			},
			// 信号灯
			continuityFn() {
				if (this.isActive == false) {
					this.music.play_didi()
					this.isActive = true
					setTimeout(() => {
						this.isActive = false
					}, 200)
				}
			},
			// 多普勒定时器
			inquitimeFn() {
				clearTimeout(this.duopsett)
				clearInterval(this.duopsein)
			},
			// 进度条
			progressBarFn() {
				this.percentageNub -= 2
				if (this.percentageNub <= 40 && this.percentageNub > 20) {
					this.actiColor = '#ffaa00'
				}
				if (this.percentageNub <= 20) {
					this.actiColor = '#e70000'
				}
			},
			// 保存点流速
			holdPointVelocityFn() {
				const arr = [...this.listData]; // 避免直接修改原数组（如果需要）
				let updated = false; // 标记是否进行了修改
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].aveTy == 0 || arr[i].aveTy === '') {
						arr[i].aveTy = this.effectiveFlow;
						arr[i].junyundu = this.junyundu;
						updated = true;
						break; // 找到第一个符合条件的就退出循环
					}
				}
				if (updated) {
					uni.$u.vuex('vuex_stationData', arr); // 只更新一次 Vuex
					this.calculateTheFlowRate(arr)
					this.measureLines = arr //测线
				}
				this.saveIF = false; // 隐藏保存点流速
				// 隐藏测量弹窗
				if (!this.calculateTheFlowRate(arr)) {
					setTimeout(() => {
						this.flowCheckpop = false
					}, 100)
					return
				}
				this.listData = this.vuex_stationData

			},
			// 初始化点流速
			initializeTheFlow() {
				// 测线数据
				let array = this.vuex_cezhanInfo.measurementModeList[1].value || [];
				for (let i = 0; i < array.length; i++) {
					array[i].cid = this.nanoid(); // 为每个对象添加 gender 字段
					array[i].aveTy = 0; // 为每个对象添加 gender 字段
					array[i].junyundu = 0; // 为每个对象添加 gender 字段
					array[i].wd = 0; // 为每个对象添加 gender 字段
				}
				console.log('array,array', array);
				this.measureLines = array //测线
				this.cexianini = array //测线初始状态
				this.listData = this.cexianini
			},
			// 是否显示计算流量
			calculateTheFlowRate(data) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].aveTy == 0 || data[i].aveTy === '') {
						return false;
					}
				}
				return true;
			},
			// 显示保存
			pointVelotyFn() {
				this.saveIF = true
				// 语音
				let input_text = '，' + '有效流速' + this.effectiveFlow + '，' + '均匀度' + this.junyundu
				this.speaks(input_text)
			},
			// 计算流量
			calculatedFlowFn() {
				this.inquitimeFn() //删除多普勒定时器
				// 准备要传递给子组件的数据
				this.objFlowData = {
					id: this.nanoid(),
					wD: this.currentDepth, // 水深
					coeffient: this.flowCoefficient, // 系数
					flowRateList: this.listData, // 测线数据
				};
				// 打开流量计算弹窗
				this.flowRateIF = true;
				// 使用 $nextTick 确保子组件已渲染
				this.$nextTick(() => {
					// 调用子组件的方法处理数据
					if (this.$refs.myCDF && this.$refs.myCDF.processFlowData) {
						this.$refs.myCDF.processFlowData(this.objFlowData);
					}
				});
			},
			fatherMethod() {
				this.inquitimeFn() //删除多普勒定时器
				this.flowRateIF = false;
				setTimeout(()=>{
					this.flowCheckpop = false
				},200)
				console.log('返回');
			},
			// 返回
			confirmflowCheckpopFn() {
				this.flowCheckpop = false
				this.inquitimeFn() //删除多普勒定时器
			},
			// 重新测量
			remeasureFn() {
				this.inquitimeFn() //删除多普勒定时器
				this.generateNewLines()
			},
			// 连接断开设备
			toggleConnect() {
				if (this.isConnected) {
					this.lampRFn()
					this.disconnectDevice()
					// 已连接则断开
				} else {
					//在起始页面跳转到test.vue页面并传递参数
					uni.navigateTo({
						url: '/pages/index/devBEL'
					});
					console.log('准备连接');
				}
			},
			/**
			 * 连接设备
			 */
			connectDevice() {
				this.isConnecting = true;
				this.connectionStatus = '正在连接...';
				this.statusDetail = '尝试与设备建立连接';

				// 显示加载中提示
				uni.showLoading({
					title: '连接中...'
				});

				// 模拟连接过程
				setTimeout(() => {
					this.isConnected = true;
					this.isConnecting = false;
					this.connectionStatus = '设备已连接';
					this.statusDetail = '连接正常，可开始测量';

					uni.hideLoading();
					uni.showToast({
						title: '设备连接成功',
						icon: 'success'
					});
				}, 1500);
			},

			/**
			 * 断开设备连接
			 */
			disconnectDevice() {
				this.isConnected = false;
				this.connectionStatus = '设备未连接';
				this.statusDetail = '已断开设备连接';

				uni.showToast({
					title: '已断开连接',
					icon: 'none'
				});
			},
			/**
			 * 初始化数据
			 */
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.$refs.alertDialog.open()
				this.initData()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			initData() {
				this.initializeTheFlow() //初始化数据
				this.inquitimeFn()
				this.statusDetail = '数据已重置';
				uni.showToast({
					title: '数据已初始化',
					icon: 'success'
				});
			},
			/**
			 * 显示水深设置弹窗
			 */
			showDepthDialog() {
				this.depthInput = this.currentDepth; // 将当前值赋给输入框
				this.$refs.depthDialog.open(); // 打开弹窗
			},
			/**
			 * 关闭水深设置弹窗
			 */
			closeDepthDialog() {
				this.$refs.depthDialog.close();
			},

			/**
			 * 确认水深设置
			 */
			confirmDepth() {
				const depth = parseFloat(this.depthInput);
				// 验证输入值
				if (!isNaN(depth) && depth > 0 && depth <= 100) {
					this.currentDepth = depth.toFixed(2); // 保留1位小数
					// 保存水深
					let obj = this.vuex_flowicient
					obj.wd = this.currentDepth
					uni.$u.vuex('vuex_flowicient', obj);
					uni.showToast({
						title: `水深已设置`,
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '输入有效水深',
						icon: 'none'
					});
				}
				this.closeDepthDialog();
			},
			/**
			 * 显示流量系数设置弹窗
			 */
			showCoefficientDialog() {
				this.coefficientInput = this.flowCoefficient;
				this.$refs.coefficientDialog.open();
			},
			/**
			 * 关闭流量系数设置弹窗
			 */
			closeCoefficientDialog() {
				this.$refs.coefficientDialog.close();
			},
			/**
			 * 确认流量系数设置
			 */
			confirmCoefficient() {
				const coefficient = parseFloat(this.coefficientInput);
				// 验证输入值
				if (!isNaN(coefficient) && coefficient > 0) {
					this.flowCoefficient = coefficient.toFixed(3); // 保留3位小数
					// 保存水深
					let obj = this.vuex_flowicient
					obj.coeffient = this.flowCoefficient
					uni.$u.vuex('vuex_flowicient', obj);
					uni.showToast({
						title: `流量系数已设置`,
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '输入有效系数',
						icon: 'none'
					});
				}
				this.closeCoefficientDialog();
			},
			// 初始语音
			initialVoice() {
				tts = new AndroidTTSVoice(function(state) {
					console.log(state)
					if (state) {
						tts.listenerVoiceState(function(b) {
							console.log(b)
						})
					}
				});
			},
			// 语音播报
			speaks(data) {
				var state = tts.speak(data);
			},
			// 输入蓝牙数据
			conbuffer(data) {
				let msg = data
				// console.log('发送数据格式蓝牙', data);
				// 向蓝牙设备发送一个0x00的16进制数据
				const buffer = new ArrayBuffer(msg.length)
				const dataView = new DataView(buffer)
				// dataView.setUint8(0, 0)
				for (var i = 0; i < msg.length; i++) {
					// dataView.setUint8(i, msg.charAt(i).charCodeAt())
					dataView.setUint8(i, msg[i]);
				}
				this.sendMsgToKey(buffer)
			},
			//监听消息变化++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
			listenValueChange(data) {
				setTimeout(() => {
					uni.onBLECharacteristicValueChange(res => {
						let resHex = this.ab2hex(res.value)
						this.monitoringInformationProcessing(resHex)
					})
				}, 300)
			},
			//获取蓝牙的所有服务
			getBLEDeviceServices() {
				setTimeout(() => {
					uni.getBLEDeviceServices({
						// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
						deviceId: this.vuex_deviceId,
						success: (res) => {
							console.log('获取蓝牙所有服务', res);
							//E95D93AF-251D-470A-A062-FA1922DFA9A8
							//6E400001-B5A3-F393-E0A9-E50E24DCCA9E
							res.services.forEach((item) => {
								if (item.uuid.indexOf("0000FFF0") != -1) {
									this.serviceId = item.uuid;
									//获取特征
									this.getBLEDeviceCharacteristics()
								}
								if (item.uuid.indexOf("0000FFE0") != -1) {
									this.serviceId = item.uuid;
									//获取特征
									this.getBLEDeviceCharacteristics()
								}
								if (item.uuid.indexOf("00001000") != -1) {
									this.serviceId = item.uuid;
									//获取特征
									this.getBLEDeviceCharacteristics()
								}
							})
						}
					})
				}, 1000)
			},
			//获取蓝牙特征
			getBLEDeviceCharacteristics() {
				console.log('获取蓝牙特征值');
				setTimeout(() => {
					uni.getBLEDeviceCharacteristics({
						// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
						deviceId: this.deviceId,
						// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
						serviceId: this.serviceId,
						success: (res) => {
							this.characteristics = res.characteristics
							res.characteristics.forEach((item) => {

								if (item.uuid.indexOf("FFF2") != -1) {
									this.fff = item.uuid

								}
								if (item.uuid.indexOf("FFE1") != -1) {
									this.fff = item.uuid

								}
								if (item.uuid.indexOf("0000FFE1") != -1) {

									this.characteristicId = item.uuid
									//利用传参的形势传给下面的notify，这里的uuid如果都需要用到，就不用做判断了，建议使用setTimeout进行间隔性的调用此方法
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
								if (item.uuid.indexOf("0000FFF1") != -1) {
									this.characteristicId = item.uuid
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
								// EW-DTU02
								if (item.uuid.indexOf("00001001") != -1) {
									this.fff = item.uuid
								}
								if (item.uuid.indexOf("00001002") != -1) {
									this.characteristicId = item.uuid
									this.notifyBLECharacteristicValueChange(item.uuid)
								}
							})
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}, 1000)
			},
			// 删除指定字符串最后面
			removeTrailingSubstring(str, suffix) {
				if (!str || !suffix) return str;

				const strLength = str.length;
				const suffixLength = suffix.length;

				// 检查字符串是否以指定的子串结尾
				if (strLength >= suffixLength &&
					str.substring(strLength - suffixLength) === suffix) {
					return str.substring(0, strLength - suffixLength);
				}

				return str;
			},
			// 16进制转2进制
			hexToBinaryW(hexString) {
				if (!/^[0-9A-Fa-f]+$/.test(hexString)) {
					throw new Error("Invalid hexadecimal string");
				}
				const decimal = parseInt(hexString, 16);
				return decimal.toString(2);
			},
			// 10进制转32位二进制补码
			NumberOf1(num) {
				// 获取负数的绝对值
				const absoluteValue = Math.abs(num);

				// 将绝对值转换为32位二进制字符串
				let binaryString = absoluteValue.toString(2);

				// 确保二进制字符串长度为32位
				while (binaryString.length < 32) {
					binaryString = '0' + binaryString;
				}

				// 对二进制字符串取反
				const invertedBinaryString = binaryString.split('').map(bit => bit === '0' ? '1' : '0').join('');

				// 将取反后的二进制字符串转换为数字并加1
				const twosComplement = parseInt(invertedBinaryString, 2) + 1;

				// 再次将补码转换为32位二进制字符串
				binaryString = twosComplement.toString(2);
				// 确保二进制字符串长度为32位
				while (binaryString.length < 32) {
					binaryString = '0' + binaryString;
				}

				return binaryString;
			},
			// 二进制补码转16进制
			binaryToHex(binaryStr) {
				// 确保二进制字符串是32位
				if (binaryStr.length !== 32) {
					throw new Error('二进制字符串的长度必须为32位');
				}

				// 将二进制字符串转换为数字
				var number = parseInt(binaryStr, 2);

				// 转换为16进制并返回结果
				return number.toString(16);
				// 示例使用
				// var binaryStr = '010101010101010101010101010101010'; // 32位二进制补码
				// var hexStr = binaryToHex(binaryStr);
			},
			//数组求平均
			averageSum(arr) {
				if (arr.length === 0) {
					return 0; // 当数组为空时，平均值为0
				}
				let sum = 0;
				for (let i = 0; i < arr.length; i++) {
					sum += arr[i] * 1;
				}
				return sum / arr.length;
			},
			// 均匀度
			evennessFn(data) {
				let arr = data
				let arli = []
				for (let i = 0; i < arr.length; i++) {
					arli[i] = arr[i] * 1000
				}
				// 均匀度
				let x = this.sum(arli) / arli.length
				let y = ''
				let z = []
				for (var i = 0; i < arli.length; i++) {
					y = (x - arli[i]) * (x - arli[i])
					z.push(y)
				}
				let n = this.sum(z) / arli.length
				let m = Math.sqrt(n) / 10

				return m.toFixed(0)

			},
			// 长度不够补0
			strRepair(str, nub) {
				let nubm = nub * 1
				let strif = str + ''
				if (strif.length < nubm) {
					for (let i = 0; i < nubm - str.length; i++) {
						strif = '0' + strif
					}
				}
				return strif
			},
			//给每个数组添加0x
			ocstr(data) {
				let arr = []
				for (let i = 0; i < data.length; i++) {
					data[i] = '0x' + data[i]
				}
				return data
			},
			// 每2个字符串为一个元素数组
			chunkStringByTwo(str) {
				const result = [];
				for (let i = 0; i < str.length; i += 2) {
					result.push(str.slice(i, i + 2));
				}
				return result;
			},
			// 处理ASCLL 30 -00
			ascllFn(data) {
				let str = data + ''
				let arr = this.chunkStringByTwo(str)

				for (let i = 0; i < arr.length; i++) {
					if (arr[i] == '00') {
						arr[i] = '30'
					}
				}
				let arrnew = arr

				let strnre = ''
				for (let i = 0; i < arrnew.length; i++) {
					strnre += arrnew[i]
				}
				return strnre
			},
			// CRC16校验
			crc16(dataHexString) {
				const dataBytes = [];
				for (let i = 0; i < dataHexString.length; i += 2) {
					dataBytes.push(parseInt(dataHexString.substr(i, 2), 16));
				}

				let crc = 0xFFFF;
				const polynomial = 0xA001;

				for (const byte of dataBytes) {
					crc ^= byte;
					for (let i = 0; i < 8; i++) {
						if (crc & 0x0001) {
							crc = ((crc >> 1) ^ polynomial) & 0xFFFF;
						} else {
							crc >>= 1;
						}
					}
				}
				let crcstr = crc.toString(16).toUpperCase();
				if (crcstr.length % 2 == 0) {
					let result = crcstr.match(/.{1,2}/g)
					return result;
				} else {
					let str = '0' + crcstr
					let result = str.match(/.{1,2}/g)
					return result;
				}
			},
			// 16进制转10进制
			hexToDecimal(hex) {
				return parseInt(hex, 16);
			},
			// 10进制转16进制
			decimalToHex(data) {
				let decimal = data * 1
				let hex = decimal.toString(16).toUpperCase();
				3
				if (hex.length % 2 !== 0) {
					return '0' + hex
				} else {
					return hex
				}
				// return decimal.toString(16).toUpperCase();
			},
			// 16进制转字符串 ASCII码
			hexToString(hex) {
				let str = '';
				for (let i = 0; i < hex.length; i += 2) {
					let charCode = parseInt(hex.substr(i, 2), 16);
					str += String.fromCharCode(charCode);
				}
				return str;
			},

			//字符串转16进制
			stringToHex(data) {
				let str = data + ''
				return str.split('').map(function(char) {
					return char.charCodeAt(0).toString(16).padStart(2, '0');
				}).join('');
			},
			// 16进制转汉字
			hexToChinese(hex) {
				var str = '';
				for (var i = 0; i < hex.length / 4; i++) {
					var codePoint = parseInt(hex.substr(i * 4, 4), 16); // 获取每四位的十六进制值并转换成十进制
					str += String.fromCharCode(codePoint); // 根据Unicode编码生成对应的字符
				}
				return str;
			},
			// 汉字转16进制
			convertToHex(str) {
				let result = '';
				for (let i = 0; i < str.length; i++) {
					result += str.charCodeAt(i).toString(16);
				}
				return result;
			},
			// 随机数
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			// 删除最小的前面几个数字
			removeSmallestN(arr, n) {
				// 对数组进行升序排序
				const sorted = arr.sort((a, b) => a - b);
				// 删除最前面的n个数字
				sorted.splice(0, n);
				return sorted;
			},
			// 删除最大的后面几个数字
			removeMax(arr, n) {
				// 对数组进行升序排序
				const sorted = arr.sort((a, b) => a - b);
				// 删除最后面的n个数字
				sorted.splice(-n);
				return sorted;
			},
			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			},
			/* 向设备发送消息(分包发送，单包20字节，递归发送)
			 */
			sendMsgToKey(buffer) {
				var that = this //vue中的this
				const packageSize = 20 //分包大小
				if (buffer.byteLength <= 20) { //如果小于20直接发送，不再继续调用
					uni.writeBLECharacteristicValue({
						// 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
						deviceId: that.deviceId,
						// 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
						serviceId: that.serviceId,
						// 这里的 characteristicId 需要在上面的 getBLEDeviceCharacteristics 接口中获取
						characteristicId: that.fff, //第二步写入的特征值
						// 这里的value是ArrayBuffer类型
						value: buffer,
						writeType: 'write',
						success: (res) => {
							//此时设备已接收到你写入的数据
							// console.log('写入11111');

						},
						fail: (err) => {
							console.log('传输失败', err)
							this.lanname = this.vuex_devicename
						},
						complete: function() {}
					})
				} else { //如果大于20发送完成后继续递归调用
					var newData = buffer.slice(20)
					var writeBuffer = buffer.slice(0, 20)
					uni.writeBLECharacteristicValue({
						// 这里的 deviceId 需要在上面的 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获取
						deviceId: that.deviceId,
						// 这里的 serviceId 需要在上面的 getBLEDeviceServices 接口中获取
						serviceId: that.serviceId,
						// 这里的 characteristicId 需要在上面的 getBLEDeviceCharacteristics 接口中获取
						characteristicId: that.fff, //第二步写入的特征值
						// 这里的value是ArrayBuffer类型
						value: writeBuffer,
						writeType: 'write',
						success: function(res) {
							// console.log('写入22222');
							//写入后继续递归调用发送剩下的数据
							setTimeout(() => {
								that.sendMsgToKey(newData)
							}, 100)
						},
						fail: (err) => {
							this.lanname = this.vuex_devicename
							console.log('传输失败', err)
						},
						complete: function() {}
					})
				}
			},
			// 启用 notify 功能
			notifyBLECharacteristicValueChange(characteristicId) {
				console.log('启用 notify 功能');
				uni.notifyBLECharacteristicValueChange({
					state: true, // 启用 notify 功能
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: this.deviceId,

					// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					serviceId: this.serviceId,
					// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
					characteristicId: this.characteristicId,
					success: (res) => {
						console.log('蓝牙名字', res);
						// vuex
						// uni.$u.vuex('vuex_devicename', this.vuexlist.name)
						uni.hideLoading()
						this.listenValueChange()
						uni.showToast({
							title: '设备正在连接',
							mask: true,
							duration: 1000
						});
						setTimeout(() => {
							this.connectDevice(); // 未连接则连接
						}, 1000)
						console.log('蓝牙服务已开启');
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '连接设备失败',
							icon: 'fail',
							mask: true,
							duration: 1000
						});

					}
				})
			},
			// 求和
			sum(arr) {
				var sum = 0;
				for (var i = 0; i < arr.length; i++) {
					sum += arr[i]
				}
				return sum
			},
			// 删除数组
			removeById(arr, id) {
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].id === id) {
						arr.splice(i, 1);
						break;
					}
				}
				return arr;
			},
			arraySum(arr) {
				let sum = 0;
				for (let i = 0; i < arr.length; i++) {
					sum += arr[i];
				}
				return sum;
			},
			// 生Id
			nanoid(size = 21) {
				let id = ''
				let i = size
				while (i--) {
					id += this.urlAlphabet[(Math.random() * 64) | 0]
				}
				return id
			},
			//断开连接
			lampRFn() {
				uni.closeBLEConnection({
					deviceId: this.vuex_deviceId,
					success: (res) => {
						uni.showToast({
							title: '设备已断开',
							icon: 'success',
							mask: true,
							duration: 1000
						});
						this.lanname = ''
						uni.$u.vuex('vuex_devicename', '')
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	/* 主容器样式 */
	.minimal-container {
		padding: 30rpx;
		background-color: #f8f9fa; // 浅灰色背景
	}

	// 测量弹窗
	// 测量弹窗
	.viewHistory {
	    min-height: 100vh;
	    max-height: 100vh;
	    overflow-y: auto;
	    padding: 80rpx 30rpx 30rpx 30rpx;
	    margin: 0 auto;
	    background-color: #f5f5f5; /* 修改：原#ffffff改为浅灰色背景 */
	
	    .head_d {
	        width: 700rpx;
	        height: 150rpx;
	        border-radius: 20rpx;
	        padding: 20rpx 0;
	        margin-bottom: 20rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-around;
	        background-color: rgba(255, 255, 255, 0.8); /* 修改：透明度提高 */
	        font-size: 35rpx;
	        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); /* 新增：添加轻微阴影 */
	
	        .yuan_a {
	            width: 230rpx;
	            padding: 10rpx;
	            border-radius: 150rpx;
	            display: flex;
	            flex-direction: column;
	            align-items: center;
	            color: #333; /* 修改：文字颜色改为深色 */
	
	            .nub {
	                font-size: 70rpx;
	                color: #444; /* 修改：数字颜色加深 */
	            }
	
	            .linbox {
	                background-color: #ccc; /* 修改：线条颜色改为灰色 */
	                width: 160rpx;
	                height: 1rpx;
	                margin-bottom: 10rpx;
	            }
	        }
	
	        .yuan_b {
	            width: 50rpx;
	            height: 50rpx;
	            margin-bottom: 10rpx;
	            border-radius: 50rpx;
	            background-color: #62e166; /* 修改：绿色调亮 */
	            border: 10rpx solid #48aa4c; /* 修改：边框颜色调亮 */
	            box-shadow: 0 0 30rpx rgba(76, 175, 80, 1); /* 修改：光晕颜色调整 */
	        }
	
	        .yuan_c {
	            width: 50rpx;
	            height: 50rpx;
	            margin-bottom: 10rpx;
	            border-radius: 50rpx;
	            background-color: #e0e0e0; /* 修改：改为浅灰色 */
	            border: 10rpx solid #f5f5f5; /* 修改：边框改为更浅色 */
	        }
	    }
	
	    // 时间线条 stationData
	    .line_cla_box {
	        border-radius: 20rpx;
	        padding: 20rpx;
	        background-color: rgba(255, 255, 255, 0.8); /* 修改：背景调亮 */
	        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); /* 新增：添加阴影 */
	
	        .line_cla {
	            display: flex;
	            flex-wrap: wrap;
	            justify-content: center;
	            align-items: flex-end;
	
	            .line_a {
	                width: 5rpx;
	                height: 10rpx;
	                border-radius: 5rpx;
	                margin: 0.5px;
	                background-color: #55aa00; /* 修改：线条颜色改为亮绿色 */
	            }
	        }
	    }
	
	    .measuring_box {
	        margin-bottom: 50rpx;
	
	        .measuritem {
	            font-size: 40rpx;
	            color: #666; /* 修改：文字颜色改为深灰色 */
	            display: flex;
	            align-items: center;
	            padding: 10rpx;
	            margin: 10rpx 0;
	            border-radius: 50rpx;
	            background-color: rgba(255, 255, 255, 0.8); /* 修改：背景调亮 */
	
	            .measurtext {
	                flex: 1;
	                text-align: center;
	            }
	        }
	    }
	
	    .container {
	        padding: 30rpx;
	
	        .list-header {
	            display: flex;
	            justify-content: space-between;
	            padding: 20rpx 30rpx;
	            background-color: #fff; /* 修改：改为纯白背景 */
	            border-radius: 12rpx;
	            margin-bottom: 10rpx;
	            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 新增：添加阴影 */
	        }
	
	        .header-text {
	            flex: 1;
	            text-align: center;
	            font-size: 32rpx;
	            color: #333; /* 修改：文字改为深色 */
	            font-weight: bold; /* 新增：加粗文字 */
	        }
	
	        .list-container {
	            background-color: #fff; /* 修改：改为纯白背景 */
	            border-radius: 12rpx;
	            overflow: hidden;
	            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 新增：添加阴影 */
	        }
	
	        .list-item {
	            display: flex;
	            justify-content: space-between;
	            padding: 10rpx 30rpx;
	            border-bottom: 1rpx solid #eee; /* 修改：边框改为浅灰色 */
	
	            .item-text {
	                color: #4CAF50; /* 修改：文字绿色调亮 */
	                flex: 1;
	                text-align: center;
	                font-size: 40rpx;
	            }
	
	            .item-acv {
	                color: #9E9E9E; /* 修改：未激活状态改为灰色 */
	                flex: 1;
	                text-align: center;
	                font-size: 45rpx;
	            }
	        }
	    }
	
	    .junyunddd {
	        color: #2196F3; /* 修改：改为蓝色 */
	        text-align: center;
	        font-size: 40rpx;
	        padding: 10rpx 0;
	    }
	
	    // 进度条
	    .progress_bar {
	        margin: 10rpx 0;
	    }
	}
	// 计算
	.viewHistory_flow_rate {
		width: 100%;
		min-height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
		margin: 0 auto;
		background-color: #f3f3f3;
	}

	/* 2. 操作按钮行样式 */
	.action-buttons {
		display: flex;
		gap: 20rpx; // 按钮间距
		margin-bottom: 30rpx;

		.action-btn {
			flex: 0.45; // 等宽分布
			height: 90rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}

			/* 初始化按钮样式 */
			&.init-btn {
				background-color: #55aa7f; // 浅灰色背景
				border: 1rpx solid #ddd; // 浅灰色边框
			}

			/* 连接按钮样式 */
			&.connectbtn {
				background-color: #9ec0c7; // 蓝色背景
			}
			/* 连接按钮样式 */
			&.connbutt {
				background-color: #3894b0; // 蓝色背景
			}

			/* 去除按钮默认边框 */
			&::after {
				border: none;
			}
		}
	}

	/* 3. 设备状态显示区域样式 */
	.status-display {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); // 轻微阴影
		border-left: 8rpx solid #FF3B30; // 默认红色左侧边框

		/* 连接状态样式 */
		&.connected {
			border-left-color: #34C759; // 连接时绿色左侧边框
		}

		.status-content {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.status-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.status-text {
				font-size: 34rpx;
				font-weight: 500;
				color: #333;
			}
		}

		.status-detail {
			.detail-text {
				font-size: 28rpx;
				color: #666; // 浅灰色文字
				padding-left: 55rpx; // 与图标对齐
			}
		}
	}

	/* 4/5. 通用单行设置样式 */
	.single-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); // 轻微阴影

		.row-label {
			display: flex;
			align-items: center;
			font-size: 34rpx;
			color: #333;

			.row-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}

		.row-value-container {
			display: flex;
			align-items: center;

			.row-value {
				font-size: 34rpx;
				color: #007AFF; // 蓝色文字
				margin-right: 10rpx;

				/* 空值时的提示文字 */
				&:empty::after {
					content: '点击设置';
					color: #999; // 灰色提示文字
				}
			}

			/* 单位样式 */
			.unit {
				font-size: 28rpx;
				color: #666;
				margin-right: 15rpx;
			}

			/* 编辑图标样式 */
			.edit-icon {
				width: 32rpx;
				height: 32rpx;
				opacity: 0.6; // 半透明效果
			}
		}
	}

	/* 6. 测线卡片样式 */
	.lines-card {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

		.card-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1; // 浅灰色分割线

			.card-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.card-title {
				font-size: 34rpx;
				color: #333;
				font-weight: 500;
			}
		}

		/* 测线按钮网格布局 */
		.lines-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr); // 3列等宽
			gap: 20rpx; // 网格间距

			.line-btn {
				padding: 10rpx 40rpx;
				background: #ebedf0; // 浅蓝色背景
				border-radius: 10rpx;
				color: #000000;
				font-size: 40rpx;
			}

			.other-btn {
				padding: 10rpx 40rpx;
				background: #6bd8a0; // 浅蓝色背景
				border-radius: 10rpx;
				color: #000000;
				font-size: 40rpx;
			}
		}
	}

	/* 7. 刷新按钮样式 */
	.refresh-btn {
		width: 100%;
		height: 90rpx;
		background: white;
		border-radius: 8rpx;
		color: #ffffff; // 蓝色文字
		background-color: #007AFF;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.refresh-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}
	}

	/* 8/9. 弹窗通用样式 */
	.dialog-container {
		width: 600rpx;
		background: white;
		border-radius: 16rpx;
		overflow: hidden;

		.dialog-header {
			padding: 30rpx;

			.dialog-title {
				font-size: 38rpx;
				font-weight: 500;
				color: #333;
				text-align: center;
			}
		}

		.dialog-content {
			padding: 0 40rpx 40rpx;

			/* 输入框样式 */
			.dialog-input {
				height: 100rpx;
				border: 1rpx solid #ddd;
				border-radius: 8rpx;
				padding: 0 30rpx;
				font-size: 36rpx;
				text-align: center;
				color: #55aa7f;
			}
		}

		/* 弹窗底部操作按钮 */
		.dialog-actions {
			display: flex;
			border-top: 1rpx solid #f1f1f1;

			.dialog-btn {
				flex: 1;
				height: 100rpx;
				font-size: 34rpx;
				background: none;
				border-radius: 0;

				/* 取消按钮样式 */
				&.cancel-btn {
					color: #666;
					border-right: 1rpx solid #f1f1f1;
				}

				/* 确定按钮样式 */
				&.confirm-btn {
					color: #007AFF;
					font-weight: 500;
				}

				/* 去除按钮默认边框 */
				&::after {
					border: none;
				}
			}
		}
	}

	// 按钮
	.custom-style {
		margin-top: 20rpx;
		// background-color: #2f2f2f;
	}
</style>
<style>
	page {
		background-color: #f8f9fa;
	}
</style>